<template>
    <div>
        <el-dialog title="新建收款记录" width="600px" :visible.sync="dialogVisible">
            <el-form ref="ruleForm" :model="form" :rules="rules" label-width="100px">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="收款订单">
                            <el-input v-model="form.name" type="text" disabled placeholder="请输入" style="width: 100%;" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item prop="date" label="日期">
                            <el-date-picker
                                v-model="form.date"
                                format="yyyy-MM-dd"
                                value-format="yyyy-MM-dd"
                                type="date"
                                placeholder="请选择"
                                style="width: 100%;"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item prop="price" label="金额">
                            <el-input v-model="form.price" type="text" placeholder="请输入" style="width: 100%;" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item prop="type" label="收款方式">
                            <el-select v-model="form.type" placeholder="请选择" style="width: 100%;">
                                <el-option label="对公银行转账" :value="1" />
                                <el-option label="对私银行转账" :value="2" />
                                <el-option label="微信" :value="3" />
                                <el-option label="支付宝" :value="4" />
                                <el-option label="现金" :value="5" />
                                <el-option label="pos" :value="6" />
                                <el-option label="美团" :value="7" />
                                <el-option label="医保" :value="8" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="备注">
                            <el-input v-model="form.msg" type="text" placeholder="请输入" style="width: 100%;" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleSubmit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { addCollection } from '@/api/order'
export default {
    name: 'ResvervationAddDialog',
    data() {
        return {
            dialogVisible: false,
            form: {
                id: '',
                type: '',
                date: '',
                price: '',
                msg: ''
            },
            rules: {
                date: [{ required: true, message: '请选择日期', trigger: 'change' }],
                price: [{ required: true, message: '请输入收款金额', trigger: 'change' }],
                type: [{ required: true, message: '请选择收款方式', trigger: 'change' }]
            }
        }
    },
    methods: {
        showDialog(item) {
            this.dialogVisible = true;
            this.resetParams();
            this.resetForm();
            console.log(item)
            if (item && item.id) {
                this.form.id = item.id;
                this.form.name = item.order_no;
            }
        },
        resetForm() {
            this.$nextTick(() => {
                this.$refs.ruleForm.resetFields();
            })
        },
        resetParams() {
            this.form = {
                id: '',
                type: '',
                date: '',
                price: '',
                msg: ''
            };
        },
        handleSubmit(e) {
            this.$refs.ruleForm.validate(valid => {
                if (valid) {
                    addCollection(this.form).then(res => {
                        if (res.status == '1') {
                            this.$message.success('操作成功！')
                            this.$emit('success', res)
                        } else {
                            this.$message.error(res.message)
                        }
                    }).finally(() => {
                        this.dialogVisible = false
                    })
                }
            })
        }
    }
}
</script>